<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <style>
        .center{
            width: 1200px;
            margin: 0 auto;
        }
        .scale{
            text-decoration: none;
            color: #666;
        }
        .scale:hover {
            transform: scale(1.2);
            transition-duration: .3s;
        }
        .scale:active{
            color: orange;
        }

        h3{color: white}
    </style>
</head>
<body>
<div id="app">
    <el-header height="70" class="center">
        <!--主导航栏开始-->
        <el-row  gutter="20">
            <!--图标开始-->
            <el-col span="6">
                <img src="imgs/icon/icon01.png" @click="location.href='index.html'" alt="icon.png"
                     style="width:196px;height: 65px;cursor: pointer;">
            </el-col>
            <!--图标结束-->

            <!--导航开始-->
            <el-col span="16">
                <el-menu :default-active="1" class="el-menu-demo"
                         mode="horizontal"
                         @select="hdNavHandleSelect"
                         active-text-color="orange">
                    <el-menu-item :index="i+1" v-for="(item,i) in hdTopMenuArr">
                        <a :href="item.url">{{item.name}}</a>
                    </el-menu-item>
                </el-menu>
            </el-col>
            <!--导航结束-->

            <!--登录注册图标开始-->
            <el-col span="2">
                <el-popover v-if="!isLogin"  title="欢迎来到烘焙网!"   trigger="hover" >
                    <el-row>
                        <el-col span="12">
                            <el-button class="scale" type="info" @click="location.href='reg.html'">注册</el-button>
                        </el-col>
                        <el-col span="12">
                            <el-button class="scale" style="background-color: orange"  @click="location.href='login.html'">登录
                            </el-button>
                        </el-col>
                    </el-row>
                    <div slot="reference">
                        <i class="el-icon-user scale" style="font-size: 30px;line-height: 70px"></i>
                    </div>
                </el-popover>
                <i v-else class="el-icon-user scale" @click="location.href='personal.html'"
                   style="font-size: 30px;line-height: 70px"></i>

            </el-col>
            <!--登录注册图标结束-->
        </el-row>
        <!--主导航栏结束-->
    </el-header>
    <el-main >
            <!--<el-card style="width: 500px; height: 300px;margin: 50px auto">
                <el-form >
                    <el-form-item>
                        <el-input
                                type="text"
                                placeholder="请输入用户名"
                                v-model="user.userName"
                        ></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-input
                                type="text"
                                placeholder="请输入昵称"
                                v-model="user.nickName"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-input
                                type="password"
                                placeholder="请输入密码"
                                v-model="user.password"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                                type="primary"
                                @click="reg">
                            提交
                        </el-button>
                        <a href="login.html"
                           style="font-size:15px;float: right;margin-top: 10px;text-decoration:none; color: #409EFF;">
                            已有帐号？现在登录
                        </a>
                    </el-form-item>
                </el-form>
            </el-card>-->
        <el-row>
            <el-col span="12" style="text-align: center;margin: 0 auto">
                <el-card style="height: 525px">
                    <img src="/imgs/zhuce.png">
                </el-card>
            </el-col>
            <el-col span="12">
                <el-form label-width="100px" style="position: relative;top: 20px;margin: 0 auto">
                    <el-form-item>
                        <h4 style="font-size: 28px;float: left;margin-top: 10px">
                            立即注册</h4>
                        <a href="login.html"
                           style="float: right;margin-top: 10px;text-decoration:none; color: #409EFF;">
                            已有帐号？现在登录
                        </a>
                    </el-form-item>


                    <el-form-item style="width: 600px">
                        <el-input
                                type="text"
                                placeholder="请输入用户名"
                                v-model="user.userName"
                        ></el-input>
                    </el-form-item>
                    <el-form-item style="width: 600px">
                        <el-input
                                type="text"
                                placeholder="请输入昵称"
                                v-model="user.nickName"
                        ></el-input>
                    </el-form-item>
                    <el-form-item style="width: 600px">
                        <el-input
                                @keydown.native.enter="reg"
                                type="password"
                                placeholder="请输入密码"
                                v-model="user.password"
                        ></el-input>
                    </el-form-item>


                    <el-form-item>
                        <el-button
                                type="primary"
                                style="display: inline-block;
                  width: 200px;margin:0 auto"
                                type="primary"
                                @click="reg">
                            提交
                        </el-button>
                    </el-form-item>
                    <!-- <el-form-item>
                      快捷登录:
                      <el-popover
                              placement="top-start"
                              width="300"
                              trigger="click">
                        <el-form style="">
                          <el-form-item
                                  style="color: blue;
                                                      font-weight: bold;">
                            微信账号登录
                          </el-form-item>
                          <el-form-item
                                  style="color: blue;
                                                      font-weight: bold;
                                                      margin-left: 20px">
                            <img src="/imgs/vx.png">
                          </el-form-item>
                          <el-form-item
                                  style="color: #676b6f;
                                              text-align: center;">
                            请使用二维码登录
                          </el-form-item>
                        </el-form>
                        <img src="/imgs/vx01.png" slot="reference"
                             style="vertical-align: middle;margin-left: 10px">
                      </el-popover>
                    </el-form-item> -->
                </el-form>
            </el-col>
        </el-row>
    </el-main>
    <el-footer height="280px" style="background:#2f3234;padding: 30px 0">
        <!--footer开始-->
            <div style="width: 1200px;margin: 30px auto;text-align: center">
                <el-row   >
                    <el-col span="5" style="color: #666;text-align: center">
                            <img src="imgs/icon/icon01.png" alt="iconImg" class="scale">
                            <p>教程灵感就看烘焙馆</p>
                            <p>烘焙行业网络社区平台</p>
                            <p>全国百城上千个职位等你来</p>
                    </el-col>

                    <el-col span="2" offset="4">
                        <h3>关于我们</h3>
                        <div v-for="item in ftTopItems[0]">
                            <a class="scale" :href="item.url">
                                {{item.text}}
                            </a>
                        </div>
                    </el-col>
                    <el-col span="2" style="height: 100%">
                        <h3>支持与服务</h3>
                        <div v-for="item in ftTopItems[1]">
                            <a class="scale" :href="item.url">
                                {{item.text}}
                            </a>
                        </div>

                    </el-col>
                    <el-col span="2" style="height: 100%">
                        <h3>底部导航</h3>
                        <div v-for="item in ftTopItems[2]">
                        <a
                           class="scale" :href="item.url">
                            {{item.text}}
                        </a>
                        </div>
                    </el-col>

                    <el-col span="4" offset="3">
                        <el-row style="margin: 15px auto">

                        </el-row>
                        <div style="margin: 0 auto;width: fit-content">
                            <span style="font-size: 54px;color: orange">烘焙</span>
                            <span style="font-size: 54px;color: #676b6f;font-style: normal">馆</span>
                            <p style="color: #666">烘焙行业网络社区平台</p>
                        </div>
                    </el-col>
                </el-row>
            </div>

            <div class="center">
                <p style="color: #aaa;text-align: center;font-size: 14px;line-height: 30px;margin: 0 auto">
                    Copyright ©2018-2023 烘焙坊Powered by©TEDU!技术支持：烘焙坊
                </p>
            </div>
        <!--footer结束-->
    </el-footer>
</div>
</body>
<!--引入axios和vue框架文件-->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {
                hdTopMenuArr: [
                    {name: '首页', url: 'index.html'},
                    {name: '食谱', url: 'recipeList.html'},
                    {name: '视频', url: 'videoList.html'},
                    {name: '资讯', url: 'infoList.html'},
                ],
                ftTopItems: [
                    [
                        {text: '关于我们', url: 'javascript:void(0)'},
                        {text: '烘焙学院', url: 'javascript:void(0)'},
                        {text: '烘焙食谱', url: 'javascript:void(0)'},
                        {text: '分类信息', url: 'javascript:void(0)'},
                        {text: '求职招聘', url: 'javascript:void(0)'},
                        {text: '社区交流', url: 'javascript:void(0)'}],
                    [
                        {text: '联系我们', url: 'javascript:void(0)'},
                        {text: '广告投放', url: 'javascript:void(0)'},
                        {text: '用户协议', url: 'javascript:void(0)'},
                        {text: '友情链接', url: 'javascript:void(0)'},
                        {text: '在线反馈', url: 'javascript:void(0)'},
                        {text: '我发投稿', url: 'javascript:void(0)'}],
                    [
                        {text: 'Archiver', url: ''},
                        {text: '手机版', url: ''},
                        {text: '小黑屋', url: ''}]
                ],
                isLogin: false,
                user:{userName:"",password:"",nickName:""}
            }
        },
        methods: {
            reg(){
                axios.post("/api/user/reg",v.user).then(function (response) {
                    console.log(response.data.code);
                    if (response.data.code===20000){
                        location.href="/login.html";
                    }else{
                        v.$message.error(response.data.msg);
                    }
                }).catch(function (error) {
                    console.log(error);
                });
            },
            hdNavHandleSelect(key, keyPath) {

            }
        }
    })
</script>
</html>